<template>
  <div class="scene-item">
    <div style="width: 100px">{{ title }}:</div>
    <div class="scene-btn">
      <div
        :class="[props.circle ? 'circleActive' : '']"
        v-for="item in props.list"
        :key="item.id"
        :style="{
          backgroundColor: `${
            props.circle && currentId === item.id
              ? `${colorToRgba(item.attribute)}`
              : ''
          }`,
        }"
      >
        <el-button
          :link="currentId !== item.id && !props.circle"
          :type="currentId === item.id && !props.circle ? 'primary' : ''"
          :circle="props.circle"
          size="small"
          :color="props.circle ? item.attribute : ''"
          :style="{
            height: '28px',
            width: props.circle ? '28px' : 'auto',
            border: props.circle ? '1px solid #ccc' : '',
            backgroundImage:
              props.circle && 0 === item.id
                ? 'conic-gradient(from 45deg,red,orange,yellow,green,blue,indigo,violet,red)'
                : '',
          }"
          @click="handleClickNode(item)"
        >
          {{ !props.circle ? item.attribute : '' }}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, PropType } from 'vue'
import { colorToRgba } from '@/utils/tools'
const props = defineProps({
  list: {
    type: Array as PropType<Array<IPptApi.Response.TemplateCateResponse>>,
    default: () => [],
  },
  title: {
    type: String,
    default: () => '',
  },
  circle: {
    type: Boolean,
    default: () => false,
  },
})
const model = defineModel()
const emit = defineEmits(['click'])
const currentId = ref<number>(0)
const handleClickNode = (item: IPptApi.Response.TemplateCateResponse) => {
  currentId.value = item.id
  model.value = item.id
  emit('click', item)
}
</script>
<style scoped lang="scss">
.scene-item {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
}
.scene-btn {
  width: calc(100% - 100px);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.circleActive {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
